<template>
	<view class="page">
		<view class="publish-demand-wrapper" v-show="isTechAuth===1 || isTechAuth===3">
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/wechat-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">微信</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;"  v-model="userInfo.wechatAccount" placeholder="请填写微信号码" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/email-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">邮箱</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;" v-model="userInfo.email"  placeholder="请填写邮箱地址" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/qq-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">QQ</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;" v-model="userInfo.qqAccount" placeholder="请填写QQ号码" />
			</view>
		
		</view>
		
		<view class="publish-demand-wrapper" v-show="isTechAuth===2 || isTechAuth===3">
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/user-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">支付宝姓名</span>
				</view>
				<input  type="text" style="text-align: right;width: 60%;color: #191919;"  v-model="userInfo.realName" placeholder="请如实填写便于结算" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/alipay-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">支付宝账号</span>
				</view>
				<input  type="text" style="text-align: right;width: 60%;color: #191919;"  v-model="userInfo.alipayAccount" placeholder="请填写支付宝账号" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/wechat-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">微信</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;"  v-model="userInfo.wechatAccount" placeholder="请填写微信号码" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/email-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">邮箱</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;" v-model="userInfo.email"  placeholder="请填写邮箱地址" />
			</view>
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 60upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;align-items: center;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/qq-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 30upx;margin-left: 18upx;font-weight: bold;">QQ</span>
				</view>
				<input  type="text" style="text-align: right;width: 70%;color: #191919;" v-model="userInfo.qqAccount" placeholder="请填写QQ号码" />
			</view>
		
			
			
			<view style="display: flex;flex-direction: row;justify-content: space-between;
			margin-left: 30upx;margin-right: 30upx;border-bottom: 1upx solid #F8F8F8;height: 96upx;">
				<view style="display: flex;align-items: center;">
					<image style="width: 32upx;height: 32upx;" src="../../static/images/tech-lang-icon.png" mode="">
					</image>
					<span style="color: #191919;font-size: 28upx;margin-left: 18upx;font-weight: bold;">擅长语言</span>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">
			
					<picker mode="selector" :range="techTypeList" :value="techType"
						@change="bindTechTypePickerChange($event,techTypeList)" range-key="name">
						<view style="color: #191919;font-size: 28upx;line-height: 96upx;">
							{{techTypeList[techType].name}}
						</view>
					</picker>
					<image style="width: 24upx;height: 24upx;margin-left: 8upx;"
						src="../../static/images/right-avatar-icon.png" mode=""></image>
				</view>
			
			</view>
		</view>
		
		<view style="width: 414upx;height: 80upx;background: #FF4E4C;border-radius: 40upx;margin-left: 160upx;margin-top: 110upx;
			text-align: center;line-height: 80upx;" @click="updateUserInfo">
			保存
		</view>
		
		
		<view style="position: fixed;bottom: 0upx;margin-bottom: 68upx;margin-left: 316upx;" >
			<view style="color: #A6A6A6;" @click="popLogout">退出登录</view>
		</view>
		
		
		<view class="popup" v-show="show">
			<view class="popup-info">
				<view style="display: flex;flex-direction: column;align-items: center;">
					<view style="color: #191919;font-size: 32upx;margin-top: 48upx;">是否确认退出？</view>
				</view>
				
				<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 56upx;">
					<view style="background: #F4F4F4;color: #191919;font-size: 28upx;width: 240upx;height: 80upx;margin-left: 30upx;
					border-radius: 32upx;text-align: center;line-height: 80upx;" @tap="cancel">取消</view>
					<view style="background: #FF4E4C;color: #FFFFFF;font-size: 28upx;width: 240upx;
					height: 80upx;margin-right: 30upx;border-radius: 32upx;text-align: center;line-height: 80upx;" @tap="confrim">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import{update_userInfo,detail} from '../../api/mine/user-info.js'
	import{get,clear} from '../../utils/local.js'
	import {
		techType_pull
	} from '../../api/home/demand.js'
	export default {
		data() {
			return {
				techTypeList: [],
				techType: 0,
				techTypeId:1,
				userInfo:{},
				show:false,
				isTechAuth:1
				
			}
		},
		onShow() {
			this.getUserInfo()
			this.userInfoDetail();
			this.getTechTypeList();
			
			
		},
		
		methods: {
			// 点击弹窗取消
			cancel() {
				this.show = false;
			},
			// 点击弹窗确认
			confrim() {
				clear()
				uni.switchTab({
					url:'../mine/mine'
				})
				
			},
			popLogout(){
				this.show=true
				
			},
			getUserInfo() {
				let userInfos = get('userInfo')
				if (userInfos) {
					this.isTechAuth = JSON.parse(userInfos).isTechAuth
				}
				
			},
			
			getTechTypeList() {
				techType_pull().then(res => {
					if (res.status === 200) {
						this.techTypeList = res.data
					} else if (res.status === 401) {
						uni.navigateTo({
							url: '../login/login'
						})
					}
			
				})
			},
			
			userInfoDetail(){
				detail().then(res=>{
					if(res.status===200){
						console.log(res.data)
						this.userInfo=res.data
					}
				})
			},
			
			updateUserInfo(){
				//需求用户更新信息
				if(this.isTechAuth===1){
					if(this.userInfo.email===''){
						uni.showToast({
							icon:'none',
							title:'请填写邮箱'
						})
						return
					}
					if(this.userInfo.qqAccount===''){
						uni.showToast({
							icon:'none',
							title:'请填写qq号码'
						})
						return
					}
					if(this.userInfo.wechatAccount===''){
						uni.showToast({
							icon:'none',
							title:'请填写微信号'
						})
						return
					}
					let params={}
					params.email=this.userInfo.email
					params.wechatAccount=this.userInfo.wechatAccount
					params.qqAccount=this.userInfo.qqAccount
					update_userInfo(params).then(res=>{
						if(res.status===200){
							uni.showToast({
								title:"保存成功"
							})
						}
						setTimeout(function() {
							uni.switchTab({
								url:'../mine/mine'
							})
						},1000)
						
					})
				}else{
					//技术更新信息
					if(this.userInfo.email===''){
						uni.showToast({
							icon:'none',
							title:'请填写邮箱'
						})
						return
					}
					if(this.userInfo.qqAccount===''){
						uni.showToast({
							icon:'none',
							title:'请填写qq号码'
						})
						return
					}
					if(this.userInfo.wechatAccount===''){
						uni.showToast({
							icon:'none',
							title:'请填写微信号'
						})
						return
					}
					if(this.userInfo.realName===''){
						uni.showToast({
							icon:'none',
							title:'请填写支付宝姓名'
						})
						return
					}
					if(this.userInfo.alipayAccount===''){
						uni.showToast({
							icon:'none',
							title:'请填写支付宝账号'
						})
						return
					}
					let params={}
					params.email=this.userInfo.email
					params.wechatAccount=this.userInfo.wechatAccount
					params.qqAccount=this.userInfo.qqAccount
					params.techTypeId=this.userInfo.techTypeId
					params.alipayAccount=this.userInfo.alipayAccount
					params.realName=this.userInfo.realName
					update_userInfo(params).then(res=>{
						if(res.status===200){
							uni.showToast({
								icon:'none',
								title:"保存成功"
							})
						}
						setTimeout(function() {
							uni.switchTab({
								url:'../mine/mine'
							})
						},1000)
						
					})
				}
			
			}
		}
	}
</script>

<style>
	.page {
		color: #F8F8F8;
	}

	.publish-demand-wrapper {
		display: flex;
		flex-direction: column;
		margin-top: 24upx;
		background: #FFFFFF;
	}
	
	.popup-info {
		position: fixed;
		width: 600upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 40upx;
		border-radius: 20upx;
		background-color: #fff;
		z-index: 9999;
	}
	
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
	}
</style>
